<template>
	<v-transition
		:show="show"
		custom-class="v-overlay"
		:duration="duration"
		:custom-style="overlayStyle"
		@click="clickHandler"
	>
		<slot />
	</v-transition>
</template>

<script>
import props from "./props.js";
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";

/**
 * overlay 遮罩
 * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
 * @property {Boolean}			show		是否显示遮罩（默认 false ）
 * @property {String | Number}	zIndex		zIndex 层级（默认 10070 ）
 * @property {String | Number}	duration	动画时长，单位毫秒（默认 300 ）
 * @property {String | Number}	opacity		不透明度值，当做rgba的第四个参数 （默认 0.5 ）
 * @property {Object}			customStyle	定义需要用到的外部样式
 * @event {Function} click 点击遮罩发送事件
 * @example <v-overlay :show="show" @click="show = false"></v-overlay>
 */
export default {
	name: "v-overlay",
	mixins: [mpMixin, mixin, props],
	computed: {
		overlayStyle() {
			const style = {
				position: "fixed",
				top: 0,
				left: 0,
				right: 0,
				zIndex: this.zIndex,
				bottom: 0,
				"background-color": `rgba(0, 0, 0, ${this.opacity})`,
			};
			return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
		},
	},
	emits: ["click"],
	methods: {
		clickHandler() {
			this.$emit("click");
		},
	},
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";
$v-overlay-top: 0 !default;
$v-overlay-left: 0 !default;
$v-overlay-width: 100% !default;
$v-overlay-height: 100% !default;
$v-overlay-background-color: rgba(0, 0, 0, 0.7) !default;
.v-overlay {
	position: fixed;
	top: $v-overlay-top;
	left: $v-overlay-left;
	width: $v-overlay-width;
	height: $v-overlay-height;
	background-color: $v-overlay-background-color;
}
</style>
